<template>
  <el-card class="box-card">
  <div slot="header" class="clearfix" style="line-height: 60px;">
    <span>添加列表</span>
  </div>
  <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="文章标题"
    prop="title"
    :rules="{
      required: true, message: '文章标题不能为空'
    }"
  >
    <el-input v-model="ruleForm.title"></el-input>
  </el-form-item>
  <el-form-item
    label="作者"
    prop="author"
    :rules="{
      required: true, message: '作者不能为空'
    }"
  >
    <el-input v-model="ruleForm.author"></el-input>
  </el-form-item>
  <el-form-item
    label="简介"
    prop="desc"
    :hide-required-asterisk="true"
    :rules="{
      required: true, message: '简介不能为空'
    }"
  >
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item label="文章详情">
    <div ref="editor"></div>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  </el-form-item>
</el-form>
</el-card>
</template>

<script>
import E from 'wangeditor'
import { addArt } from '@/api'
export default {
  data () {
    return {
      editor: null,
      ruleForm: {
        title: '',
        author: '',
        desc: ''
      }
    }
  },
  mounted () {
    this.editor = new E(this.$refs.editor)
    this.editor.create()
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const fromValue = {
            ...this.ruleForm,
            content: this.editor.txt.html(),
            count: 0,
            createAt: Date.now()
          }
          addArt(fromValue).then(res => {
            if (res.data.code === '0') {
              this.$message({
                message: res.data.msg,
                type: 'success',
                duration: 1000,
                onClose: () => this.$router.go(0)
              })
            }
          })
        } else {
          this.$message({
            message: '请按要求输入',
            duration: 1000,
            type: 'warning'
          })
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-card__header{
  padding:0;
  height:60px;
}
</style>
